<template>
  <div class="set-rule-modal">
    <div class="rule-item-title">
      <span class="type-style">
        <a-select
          v-model:value="ruleData.period"
          style="width: 120px"
          :options="periodOptions"
        ></a-select>
        警情
        <a-select
          v-model:value="ruleData.type"
          style="width: 120px"
          :options="typeOptions"
        ></a-select>
        增长时，进行预警。
      </span>
    </div>
    <div class="rule-item-content">
      <!-- 红色预警 -->
      <span class="rule-item_level">
        <span class="red-style color-style">
          <img src="@/assets/yj-red.png" alt="" />
          红色预警：
        </span>
        ≥
        <a-input-number :min="0" :max="100000" v-model:value="ruleData.level1" />
        <span v-if="ruleData.type !== 'N'">%</span>
      </span>
      <!-- 橙色预警 -->
      <span class="rule-item_level">
        <span class="orange-style color-style">
          <img src="@/assets/yj-orange.png" alt="" />
          橙色预警：
        </span>
        ≥
        <a-input-number :min="0" :max="100000" v-model:value="ruleData.level2" />
        <span v-if="ruleData.type !== 'N'">%</span>
      </span>
      <!-- 黄色预警 -->
      <span class="rule-item_level">
        <span class="yellow-style color-style">
          <img src="@/assets/yj-yellow.png" alt="" />
          黄色预警：
        </span>
        ≥
        <a-input-number :min="0" :max="100000" v-model:value="ruleData.level3" />
        <span v-if="ruleData.type !== 'N'">%</span>
      </span>
      <!-- 蓝色预警 -->
      <span class="rule-item_level">
        <span class="blue-style color-style">
          <img src="@/assets/yj-blue.png" alt="" />
          蓝色预警：
        </span>
        ≥
        <a-input-number :min="0" :max="100000" v-model:value="ruleData.level4" />
        <span v-if="ruleData.type !== 'N'">%</span>
      </span>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive, watch, toRaw } from 'vue';
import { ruleItemState } from '@/views/magic-cube/method-mode/set-ai-early-warning/js/typing';

const validator = (a: number, b: number, c: number, d: number) => {
  return a > b && b > c && c > d;
};
export default defineComponent({
  props: {
    rule: {},
  },
  emits: ['change', 'update:visible'],
  components: {},
  setup(props, { emit }) {
    const ruleData = reactive<ruleItemState>({
      ruleId: '', // 规则id
      period: 'D', // 周期（日-D，周-W，月-M）
      type: 'T', // 规则增长类型（T-同比，H-环比，N-数值）
      level1: 80, // 红色预警
      level2: 60, // 橙色预警
      level3: 40, // 黄色预警
      level4: 20, // 蓝色预警
    });
    const ruleList = ref([]);

    const periodOptions = ref([
      {
        label: '每日',
        value: 'D',
      },
      {
        label: '每周',
        value: 'W',
      },
      {
        label: '每月',
        value: 'M',
      },
    ]);

    const typeOptions = ref([
      {
        label: '同比',
        value: 'T',
      },
      {
        label: '环比',
        value: 'H',
      },
      {
        label: '数值',
        value: 'N',
      },
    ]);

    onMounted(() => {});
    watch(
      () => ruleData,
      () => {
        emit('change', toRaw(ruleData));
      },
      {
        deep: true,
      },
    );

    watch(
      () => props.rule,
      () => {
        Object.keys(props.rule as ruleItemState).forEach(
          k => (ruleData[k] = (props.rule as ruleItemState)[k]),
        );
      },
      {
        // deep: true,
        immediate: true,
      },
    );

    return {
      periodOptions,
      typeOptions,
      ruleData,
      ruleList,
    };
  },
});
</script>

<style scoped lang="less">
.set-rule-modal {
  .rule-item-title {
    .type-style {
      display: inline-block;
      color: #b9c4dd;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .type-style + .type-style {
      margin-left: 20px;
    }
  }
  :deep(.ant-input-number) {
    width: 65px;
  }
  .rule-item-content {
    padding-top: 15px;
    .rule-item_level {
      padding-right: 8px;
    }
    .red-style {
      color: #ff1b3f;
    }
    .orange-style {
      color: #ff6f1c;
    }
    .yellow-style {
      color: #ecd60d;
    }
    .blue-style {
      color: #1cdaff;
    }
    .color-style + .color-style {
      margin-left: 10px;
    }
  }
}
.rule-err-msg {
  float: left;
  height: 32px;
  padding: 0 15px;
  padding-right: 160px;
  color: #eb9797;
  font-weight: 400;
  font-size: 14px;
  line-height: 32px;
}
</style>
